<template>
    <div class="cbox">
        <p>子组件</p>
        <p>$attrs:{{ $attrs }}</p>
        <p>username:{{ username }}</p>
        <p>num:{{ num }}</p>
        <input type="button" value="setNum" @click=" setNum() ">
        <hr>
        <p>flag:{{ flag }}</p>
        <input type="button" value="changeFlag" @click=" updateFlag() ">
        <hr>
        <p>password:{{ modelValue }}</p>
        <input v-model="password" type="text" />
    </div>
</template>

<!-- <script>
export default {
    emits:["update:flag"]
    props:["num"],
    data(){
        return {
            flag:false
        }
    },
    methods: {
        printAttrs() {
            console.log( this.$attrs );
        },
        updateFlag(){
            this.$emit('update:flag',this.flag)
        }
    },
}
</script> -->

<script setup>
import { defineProps,defineEmits, ref, computed } from "vue";

// defineProps(["num","username"]);
let props = defineProps({
    num:{
        type:Number,
        default:0
    },
    username:{},
    modelValue:{
        type:String,
        default:""
    }
});
const setNum = function(){
    // console.log(1)
    console.log(props)
    // props.num = Math.random();
}

let flag = ref(false)

let emit = defineEmits(["update:flag","update:modelValue"])

const updateFlag = function(){
    flag.value = !flag.value;
    // console.log(emit)
    emit("update:flag",flag.value)
}

let password = computed({
    get(){
        return props.modelValue;
    },
    set(nv){
        emit("update:modelValue",nv)
    }
})

</script>

<style lang="scss" scoped>
.cbox{
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
}
</style>